<template>
	<view class="my-car-page">
		<view class="switchbpx">
			<view>是否开启无感支付功能 
				<uni-tooltip>
					<view style="width: 80rpx;height: 80rpx;line-height: 80rpx;text-align: center;">
						<uni-icons type="help" color="red" size="22"></uni-icons>
					</view>
					<template v-slot:content>
						<view style="width: 300rpx;">
							开通无感支付后，将自动优先从优生活余额扣除停车费用，不够再扣账户余额，使用前 请确保账户余额充足
						</view>
					</template>
				</uni-tooltip>
			</view>
			<!-- open_non_pay字段判断 0未开启 1已开启 -->
			<switch color="#F94D29" @change="setpay" :checked="myinfo.open_non_pay" style="transform:scale(0.7)" />
		</view>
		<view  class="swiper" @click="toEdit(item)" v-for="(item,index) in list" :key="index">
			<view class="car-item">
				<view class="flex jus-b">
					<view class="number">{{item.car_no}}</view>
					<view class="remove" @click.stop="editdel(item)">
						<uni-icons class="trash" type="trash" color="#a0a0a0" size="24" />
					</view>
				</view>
				<view class="line" style="margin-top: 80rpx;">
					<text class="label">添加时间</text>
					<text>{{dateFormat(item.createtime)}}</text>
				</view>
				<view class="line ali-c" @click.stop="">
					<text class="label">默认车辆</text>
					<switch color="#F94D29" :checked="item.isdefault" @change.stop="e=>setdefault(e,item)" />
				</view>
			</view>
		</view>
		<!-- <swiper class="swiper" circular next-margin="50px" v-if="list.length>0">
			<swiper-item @click="toEdit(item)" v-for="(item,index) in list" :key="index">
				<view class="car-item">
					<view class="flex jus-b">
						<view class="number">{{item.car_no}}</view>
						<view class="remove" @click.stop="editdel(item)">
							<uni-icons class="trash" type="trash" color="#a0a0a0" size="24" />
						</view>
					</view>
					<view class="line" style="margin-top: 80rpx;">
						<text class="label">添加时间</text>
						<text>{{dateFormat(item.createtime)}}</text>
					</view>
					<view class="line ali-c" @click.stop="">
						<text class="label">默认车辆</text>
						<switch color="#F94D29" :checked="item.isdefault" @change.stop="e=>setdefault(e,item)" />
					</view>
				</view>
			</swiper-item>
		</swiper> -->
		<view @click="$navigateTo('/pages/carrecord/carrecord')" style="padding: 20rpx;color: gray;text-align: center;">
			停车记录
			<uni-icons type="right" color="" size="14" />
		</view>
		<kong v-if="list.length==0"></kong>
		<view class="add-car">
			<navigator open-type="navigate" url="/pages/addcar/addcar" class="button flex ali-c jus-c">
				<uni-icons type="plusempty" color="#fff" size="24" />
				<text class="ml-10">添加车辆</text>
			</navigator>
		</view>
	</view>
</template>
<script>
	import kong from '../../components/kong.vue'
	export default {
		components: {
			kong
		},
		data() {
			return {
				list: [],
				myinfo:{},
			}
		},
		onShow() {
			this.getmycar()
			this.getmyinfo()
		},
		methods: {
			getmyinfo(){
				this.$http({
					url:'api/Wechat/userinfo'
				}).then(res=>{
					//open_non_pay字段判断 0未开启 1已开启
					this.myinfo = res.data
				})
			},
			getmycar() {
				this.$http({
					url: 'api/Wechat/userCarList'
				}).then(res => {
					this.list = res.data
				})
			},
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			//设置默认车辆
			setdefault(e, item) {
				this.$http({
					url: 'api/Wechat/set_default_car',
					data: {
						id: item.id
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.getmycar()
				})
			},
			//删除
			editdel(item) {
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.$http({
								url: 'api/Wechat/del_user_car',
								data: {
									id: item.id
								}
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.getmycar()
							})
						}
					}
				});
			},
			toEdit(item) {
				uni.navigateTo({
					url: '/pages/addcar/addcar?car=' + decodeURIComponent(JSON.stringify(item))
				})
			},
			//设置无感支付
			setpay(e){
				//open_non_pay字段判断 0未开启 1已开启
				console.log(e.detail.value)
				
				if(this.myinfo.open_non_pay==0){
					uni.showModal({
						title: '提示',
						content: '确定开启无感支付吗？请确保您的余额充足',
						success: async(res) => {
							if (res.confirm) {
								await this.$http({
									url: 'api/Wechat/setOpenNonPay',
									// data: { id }
								}).then(mag=>{
									uni.showToast({
										title: mag.msg,
										icon: 'success',
										mask: true
									})
									this.getmyinfo()
								})
								
							} else if (res.cancel) {
								this.myinfo = {}
								this.getmyinfo()
							}
						}
					});
					
				}else{
					uni.showModal({
						title: '提示',
						content: '确定关闭无感支付吗？',
						success: async(res) => {
							if (res.confirm) {
								await this.$http({
									url: 'api/Wechat/setOpenNonPay',
									// data: { id }
								}).then(mag=>{
									uni.showToast({
										title: mag.msg,
										icon: 'success',
										mask: true
									})
									this.getmyinfo()
								})
								
							} else if (res.cancel) {
								this.myinfo = {}
								this.getmyinfo()
							}
						}
					});
				}
				
			}
		}
	}
</script>
<style lang="scss">
	.my-car-page {
		min-height: 100vh;
		background-color: #f9f9f9;
		padding-top: 24rpx;

		.swiper {
			padding-left: 24rpx;
			height: 380rpx;
			width: 690rpx;
			margin: 0 auto;

			.car-item {
				width: 650rpx;
				background-color: white;
				border-radius: 10rpx;
				// margin-right: 40rpx;
				padding: 24rpx 20rpx;
				position: relative;
				overflow: hidden;

				.number {
					font-size: 36rpx;
					font-weight: 500;
				}

				.line {
					display: flex;
					justify-content: space-between;
					padding: 14rpx 0;
				}

				.remove {
					position: absolute;
					right: 0;
					background-color: #ececec;
					top: 0;
					height: 200rpx;
					width: 200rpx;
					transform: rotate(-45deg);
					right: -100rpx;
					top: -100rpx;

					.trash {
						position: absolute;
						left: 16rpx;
						top: 70rpx;
						transform: rotate(45deg);
					}
				}

				.label {
					color: gray;
				}

			}
		}

		.switchbpx {
			width: 690rpx;
			padding: 0 30rpx;
			height: 80rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #222;

			>view {
				display: flex;
				align-items: center;
			}
		}

		.add-car {
			width: 750rpx;
			padding:20rpx 0;
			position: fixed;
			height:130rpx;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			// left: 34rpx;
			background-color: #F7F7F7;
			.button {
				width: 690rpx;
				margin: 15rpx auto;
				height: 96rpx;
				background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
				border-radius: 83rpx 83rpx 83rpx 83rpx;
				color: white;
				text-align: center;
				font-size: 36rpx;
			}
		}
	}
</style>